<script setup lang="ts" name="view">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  url: {
    type: String,
    required: false,
  },
})
const emit = defineEmits(['pdfload'])
definePageMeta({
  title: 'View', // 自定义元信息
  requiresAuth: false, // 其他自定义元信息
  layout: 'default', // 指定布局
  keepalive: true,
  refresh: true,
  key: route => `${JSON.stringify(route.fullPath)}-${JSON.stringify(route.params)}-${JSON.stringify(route.query)}`,
})
// 前端PDF渲染，pdf.js的多种渲染使用方式
// from:xlybyte
// https://article.juejin.cn/post/7215213377094582328

const route = useRoute()
const urlFromRoute = route.query.url
const src = computed(() => {
  return `/pdfjs-3.11.174-dist/web/viewer.html?file=${urlFromRoute || props.url}`
})
</script>

<template>
  <div class="h-[calc(100%-20px)]">
    <iframe
      :src="src"
      frameborder="0"
      width="100%"
      height="100%"
      class="pdf-iframe h-full w-full"
    />
  </div>
</template>

<style scoped>
.pdf {
  height: calc(100vh - 120px);
}
</style>
